<template>
  <div class="headBack">
    <el-row class="container">
      <el-col :span="24">
        <div class="headBox">
          <el-menu
              router :default-active="$route.path"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
          >
            <el-menu-item index="/home" >首页</el-menu-item>
            <el-submenu index="2">
              <template slot="title">导航栏</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
              <el-menu-item index="2-4">选项4</el-menu-item>
            </el-submenu>
            <el-menu-item index="/addblog">写博客</el-menu-item>
            <el-menu-item index="/message">留言板</el-menu-item>
            <el-menu-item index="/about">关于</el-menu-item>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>


export default {
  props:{
    path:String
  },
  data(){
    return{

    }
  },
  methods: {
    handleSelect() {

    }
  }
}
</script>

<style>
.headBack {
  width: 100%;
  background: rgba(40, 42, 44, 0.6);
  /*margin-bottom:30px;*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
  position: fixed;
  left:0;
  top: 0;
  right: 0;
  z-index: 100;
}

.headBox li.is-active {
  /*background: #48456C;*/
  background: rgba(73, 69, 107, 0.7);
}
.headBox>ul li.el-menu-item:hover,
.headBox>ul li.el-submenu:hover .el-submenu__title {
  background: #48456C;
  border-bottom: none;
}

.headBox>ul .el-submenu .el-menu,
.headBox>ul .el-submenu .el-menu .el-menu-item {
  background: #48456C;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: none!important;
}

.headBox .el-menu {
  background: transparent;
  border-bottom: none!important;
  left: 150px;
}

.headBox .el-menu-demo li.el-menu-item,
.headBox .el-menu--horizontal .el-submenu .el-submenu__title {
  height: 38px;
  line-height: 38px;
  border-bottom: none!important;
}

.headBox .el-submenu li.el-menu-item {
  height: 38px;
  line-height: 38px;

}

.headBox li .fa-wa {
  vertical-align: baseline;
}

.headBox ul li.el-menu-item,
.headBox ul li.el-menu-item.is-active,
.headBox ul li.el-menu-item:hover,
.headBox .el-submenu div.el-submenu__title,
.headBox .el-submenu__title i.el-submenu__icon-arrow {
  color: #fff;
}

.headBox .el-menu--horizontal .el-submenu>.el-menu {
  top: 38px;
  border: none;
  padding: 0;
}
.headBox>ul .el-submenu .el-menu .el-menu-item {
  min-width: 0;
}

.headBox>ul .el-submenu .el-menu .el-menu-item:hover {
  background: #64609E;
}
</style>